<template>
  <div class="device-page-index">
    <div v-if="loadData" class="device-page">
      <!--有绑定设备  -->
      <div class="device-controller" v-if="getNameDevicesList.length !== 0" :class="{ 'vux-flexbox-hoz':modeListClass, 'device-controller-hoz':!modeListClass, 'verticalHeight':isVerticalHeight }">
        <div class="device-controller-info">
          <div class="current-device" @click="showDeviceList"  v-clickoutside="onClose">
            <div class="current-device--name">当前设备 : {{ uiCurrentDevice }}</div>
            <div class="down__arrow"></div>
            <div class="deviceList-warp__icon-angle" v-show="deviceListWarp"></div>
            <div class="deviceList-warp" v-show="deviceListWarp">
              <div class="deviceList">
                <div @click="selectDevice(device)" v-for="(device, index) in uiDeviceList" :key="index" class="inner-wrap">
                  <div class="deviceList--per">
                    {{ device }}
                    <div :class="device === uiCurrentDevice ? 'selectImg' : ''"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="temprature--info" v-if="!currentDeviceOffline">
            <div class="currentTemprature">
              <p class="tempratureSize">当前温度</p>
              <p class="valueSize">{{ allType.currentTemprature.value }}{{uiTempratureType}}</p>
            </div>
            <div class="tempratureDashboard">
              <div class="tempratureDashboard__cirle">
                <x-circle 
                  :percent="percent" 
                  :stroke-width="2" 
                  stroke-color="#fff" 
                  style="box-sizing:border-box" 
                  trail-color="#a13b6e">
                </x-circle>
              </div>
              <div class="tempratureDashboard__setTemprature">
                <div class="temprature">
                  <span class="setTempratureSize">{{ allType.setTemprature.value }}</span>{{uiTempratureType}}
                </div>
                <div class="currentMode" :class="uiCurrentModeName">{{ currentModeName }}</div>
              </div>
            </div>
            <div class="limtTemprature">
              <div class="minTemprature">{{ this.allType.minTemprature.value }}{{uiTempratureType}}</div>
              <div class="maxTemprature">{{ this.allType.maxTemprature.value }}{{uiTempratureType}}</div>
            </div>
            <div class="subTemprature"  :class="statusBg()" @click="ctrlTemprature('sub')"></div>
            <div class="addTemprature" :class="statusBg(true)" @click="ctrlTemprature('add')"></div>
          </div>
        </div>
        <div class="device-mode--first" v-if="!currentDeviceOffline">
          <tab :line-width="1" custom-bar-width="80px" bar-active-color="#cc3d79">
            <tab-item
              v-for="(mode, index) in allType.fristMode" 
              @on-item-click="selectMode(mode)"
              active-class="active" 
              class="vux-1px-r"
              :selected="selected(mode, index)" 
              :key="index">
              <div class="img" :class=" mode.title ? mode.title : '' "></div>
              <p v-if="mode.title === 'wine'">
                {{ wineName }} ≡
              </p>
              <p v-else>
                {{ mode.name }}
              </p>
            </tab-item>
          </tab>
          <div class="wineMode--box vux-1px-radius" v-if="showWineMode">
            <div class="wineMode" :class="index !== allType.wineMode.length - 1 ? 'vux-1px-b' : ''" v-for="(mode, index) in allType.wineMode" :key="index" @click="selectedWineMode(mode)">{{ mode.name }}</div>
            <div class="icon-angle"></div>
          </div>
        </div>
        <div class="sliveBg" v-if="!currentDeviceOffline"></div>
        <div class="device-mode--secondary" v-if="!currentDeviceOffline">
          <group class="vux-list-hoz">
            <flexbox class="vux-1px-b" v-for="(mode, index) in allType.secondaryMode" :key="index" style="flex:1">
              <flexbox-item :span="1"> 
                <div class="secondary__img--size" :class="mode.title"></div>
              </flexbox-item>
              <flexbox-item class="normalSwitch" :class="{ 'normalSwitch-hoz':modeListClass }">
                <x-switch 
                  :title="mode.name"
                  :value="mode.value - 0 === 1"
                  :inline-desc="barRemainingTime(mode)"
                  @on-change="val => currentOnoff(val, mode, index === 3)">
                </x-switch>
              </flexbox-item>
              <flexbox-item v-if=" mode.title === 'bar' "  class="barLightMode" :class="{ 'barLightMode-hoz':modeListClass }">
                <x-switch 
                  :title="mode.name"
                  :value="mode.value - 0 === 2"
                  @on-change="val => currentOnoff(val, mode, index === 3, true)">
                </x-switch>
              </flexbox-item>
              <div v-if=" mode.title === 'bar' ">
                <div class="normal" :style="{ right:lightStatus.normalLight }">一般</div>
                <div class="light" :style="{ right:lightStatus.alwaysLight }">常亮</div>
              </div>
            </flexbox>
          </group>
        </div>
      </div>
      <!-- 无绑定设备 -->
      <div v-else class="nullData nullData-hoz">
        <div class="img"></div>
        <div class="mb10">
          <p>暂无关联设备</p>
        </div>
        <div class="addDevice">
          <x-button class="custom-primary-red vux-1px-radius" @click.native = "addDevice()">添加设备</x-button>
        </div>
      </div>
      <!-- 有绑定设备，但是设备不在线 -->
      <div class="currentDeviceOffline currentDeviceOffline-hoz" v-if="currentDeviceOffline">
        <!-- <div>当前设备不在线</div> -->
        <div class="img"></div>
        <div class="outline-font">
          <p>当前设备不在线</p>
        </div>
        <div class="addDevice">
          <x-button @click.native="refresh" class="custom-primary-red vux-1px-radius">刷新</x-button>
        </div>
      </div>
    </div>
    <div v-transfer-dom class="toast-modify">
      <loading v-model="loading" :text="text"></loading>
    </div>
  </div>
</template>
<script>
import {Loading, Tab, TabItem, XSwitch, Group, CellBox, Flexbox, FlexboxItem, XButton, Selector, XCircle, Alert, Icon, Toast, TransferDomDirective as TransferDom} from 'vux'
import { mapGetters } from 'vuex'
import TYPE from '@/config/type'
import WORKMODE from '@/config/work_mode'
import clickoutside from '@/directives/clickoutside'
import wx from 'weixin-js-sdk'

export default {
  name: 'deviceController',
  directives: {
    TransferDom,
    clickoutside
  },
  components: {
    Tab,
    TabItem,
    XSwitch,
    Group,
    CellBox,
    Flexbox,
    FlexboxItem,
    XButton,
    Selector,
    XCircle,
    Alert,
    Icon,
    Toast,
    Loading
  },
  data () {
    return {
      text: '正在刷新请稍后',
      deviceListWarp: false,
      loadData: false,
      loading: true,
      devicesList: [],
      currentDevice: '',
      showWineMode: false,
      currentMode: 'temprature',
      currentModeName: '',
      currentDeviceOffline: false,
      position: 'bottom',
      barHeight: false,
      allType: {
        tempratureType: {
          name: '当前温度类型',
          title: 'tempratureType',
          key: TYPE.TEMPRATURETYPE,
          value: 0
        },
        workMode: {
          name: '当前工作模式',
          title: 'workMode',
          key: TYPE.WORKMODE,
          value: 19
        },
        countDown: {
          name: '倒计时30分钟',
          title: 'countDown',
          key: TYPE.COUNTDOWN,
          value: ''
        },
        degermationCountDown: {
          name: '倒计时10分钟',
          title: 'degermationCountDown',
          key: TYPE.DEGERMATIONCOUNTDOWN,
          value: ''
        },
        currentTemprature: {
          name: '当前温度温度',
          title: 'currentTemprature',
          key: TYPE.DISPLAYTEMP,
          value: 12
        },
        setTemprature: {
          name: '设置温度',
          title: 'setTemp',
          key: TYPE.SETTEMP,
          value: 15
        },
        minTemprature: {
          name: '最小温度',
          title: 'minTemprature',
          key: TYPE.MINCTRLTEMP,
          value: 9
        },
        maxTemprature: {
          name: '最大温度',
          title: 'minTemprature',
          key: TYPE.MAXCTRLTEMP,
          value: 19
        },
        fristMode: [{
          name: '温控模式',
          title: 'temprature',
          key: WORKMODE.TEMPRATURE,
          value: 1
        }, {
          name: '窖藏模式',
          title: 'cellar',
          key: WORKMODE.CELLRA,
          value: 0
        }, {
          name: '酒类模式',
          title: 'wine'
        }],
        wineMode: [{
          name: '红酒模式',
          title: 'redWine',
          key: WORKMODE.RED_WINE,
          value: 0
        }, {
          name: '白酒模式',
          title: 'Spirit',
          key: WORKMODE.SPIRIT,
          value: 0
        }, {
          name: '香槟模式',
          title: 'champagne',
          key: WORKMODE.CHAMPAGNE,
          value: 0
        }],
        secondaryMode: [{
          name: '保湿模式',
          title: 'moisture',
          key: TYPE.MOISTUREMODEONOFF,
          value: 0
        }, {
          name: '侍酒模式',
          title: 'sober',
          key: TYPE.SOBERUPMODEONOFF,
          value: 0
        }, {
          name: '净味除菌',
          title: 'odor',
          key: TYPE.DEGERMATIONMODEONOFF,
          value: 0
        }, {
          name: '酒吧模式',
          title: 'bar',
          key: TYPE.BARMODEONOFF,
          value: 0
        }]
      },
      allMode: {
        NULL: '温控模式',
        TEMPRATURE: '温控模式',
        CELLRA: '窖藏模式',
        SPIRIT: '白酒模式',
        RED_WINE: '红酒模式',
        CHAMPAGNE: '香槟模式'
      },
      pragms: {},
      lightStatus: {
        normalLight: '',
        alwaysLight: ''
      },
      modeListClass: false,
      isVerticalHeight: true
    }
  },
  computed: {
    // 设备列表
    ...mapGetters({
      socketList: 'control/socketList',
      currentSocket: 'control/currentSocket',
      getNameDevicesList: 'control/redWineDeviceList',
      uiDevice: ['control/uiDevice']
    }),
    // 整个圆100% 本例中仅仅使用了2/3之圆，因此百分比同比例缩小
    percent () {
      return (this.allType.setTemprature.value - this.allType.minTemprature.value) / (this.allType.maxTemprature.value - this.allType.minTemprature.value) / 3 * 200
    },
    uiTempratureType () {
      return this.allType.tempratureType.value - 0 === 0 ? '℃' : '℉'
    },
    uiDeviceList () {
      let uiDeviceList = []
      if (this.getNameDevicesList && this.getNameDevicesList.length !== 0) {
        this.getNameDevicesList.forEach((item) => {
          let name = item.device_name ? item.device_name : item.device_mac
          let device = name
          uiDeviceList.push(device)
        })
        this.$store.dispatch('control/uiDeviceList', uiDeviceList)
        return uiDeviceList
      }
    },
    uiCurrentDevice () {
      return this.uiDevice || (this.uiDeviceList && this.uiDeviceList[0])
    },
    uiCurrentModeName () {
      let value = this.allType.workMode.value
      let _self = this
      for (let mode in WORKMODE) {
        if (WORKMODE[mode] === value) {
          _self.currentModeName = _self.allMode[mode]
        }
      }
    },
    wineName () {
      let workMode = this.allType.workMode.value
      if (workMode === 0 || workMode === 1 || workMode === 2) {
        return '酒类模式'
      } else {
        if (this.currentModeName === '窖藏模式' || this.currentModeName === '温控模式') {
          return '酒类模式'
        } else {
          return this.currentModeName
        }
      }
    }
  },
  watch: {
    socketList (newTemp) {
      this.init()
    }
  },
  mounted () {
    this.$Title.set('美晶智能红酒柜')
  },
  methods: {
    // nav切换模式 酒类模式不切换 选择酒类模式中的小类才开始切换
    selectMode (currentMode) {
      if (currentMode.title === 'wine') {
        this.showWineMode = true
        window.clearTimeout(this.timeId)
        this.timeId = setTimeout(() => {
          this.showWineMode = false
        }, 3000)
      } else {
        //  work模式index === 19 其中包含5个小类key 分别为1-5
        let key = TYPE.WORKMODE
        let value = currentMode.key
        this.changeData({value, key})
        this.currentMode = currentMode.title
        this.currentModeName = currentMode.name
        this.showWineMode = false
      }
    },
    // 选择酒类模式
    selectedWineMode (mode) {
      //  work模式index === 19 其中包含5个小类key 分别为1-5
      let key = TYPE.WORKMODE
      let value = mode.key
      this.changeData({key, value})
      this.currentMode = mode.title
      this.currentModeName = mode.name
      this.showWineMode = false
    },
    selected (mode, index) {
      let workModeValue = this.allType.workMode.value
      if (workModeValue === WORKMODE.TEMPRATURE || workModeValue === 0) {
        return index === 0
      } else if (workModeValue === WORKMODE.CELLRA) {
        return index === 1
      } else if ([WORKMODE.SPIRIT, WORKMODE.RED_WINE, WORKMODE.CHAMPAGNE].indexOf(workModeValue) !== -1) {
        return index === 2
      }
    },
    // 模式开关
    currentOnoff (newValue, mode, isBar, is2) {
      if (this.switchSetting) return
      this.switchSetting = true
      this.tid = window.setTimeout(() => {
        this.switchSetting = false
        let oldValue = mode.value
        let key = mode.key
        if (!isBar) {
          newValue = Number(newValue)
        } else {
          if (!newValue) {
            if (oldValue === 2) {
              newValue = is2 ? 0 : 2
            } else if (oldValue === 1) {
              newValue = is2 ? 1 : 0
            } else {
              return
            }
          } else {
            newValue = (is2 ? 2 : 1)
          }
        }
        if (oldValue === newValue) return
        mode.value = newValue
        this.changeData({key, value: newValue})
        this.waitingTip()
      }, 10)
    },

    // 添加设备
    addDevice () {
      wx.scanQRCode()
    },
    testShare () {
      wx.onMenuShareAppMessage({
        title: 'test',
        desc: '',
        link: 'test.xlink.cn/wechat/raching/share?cur=18&test=try',
        success: function () {
          alert('分享成功')
        }
      })
    },

    // 控制温度
    ctrlTemprature (isAdd) {
      if (this.allType.workMode.value === 0 || this.allType.workMode.value === 1) {
        let setTemprature = this.allType.setTemprature.value
        const minTemprature = this.allType.minTemprature.value
        const maxTemprature = this.allType.maxTemprature.value
        if (isAdd === 'add') {
          if (setTemprature >= minTemprature && setTemprature < maxTemprature) {
            let key = TYPE.SETTEMP
            let value = ++setTemprature
            this.changeData({key, value})
          }
        } else {
          if (setTemprature > minTemprature && setTemprature <= maxTemprature) {
            let key = TYPE.SETTEMP
            let value = --setTemprature
            this.changeData({key, value})
          }
        }
      }
    },
    barRemainingTime (mode) {
      if (mode.title === 'bar' && mode.value === 1 && this.allType.countDown.value !== 0) {
        return `酒吧倒计时${this.allType.countDown.value}分钟`
      } else if (mode.title === 'odor' && mode.value === 1 && this.allType.degermationCountDown.value !== 0) {
        return `倒计时${this.allType.degermationCountDown.value}分钟`
      }
    },

    waitingTip () {
      this.$vux.toast.show({
        text: '等待中'
      })
    },
    successTip () {
      this.$vux.toast.show({
        text: '修改成功',
        time: 500
      })
    },
    failTip () {
      this.$vux.toast.show({
        text: '加载失败'
      })
    },
    init () {
      let _self = this
      if ([-90, 0, 90, 180].indexOf(window.orientation) !== -1) {
        // 变成竖屏
        if (window.orientation === 180 || window.orientation === 0) {
          _self.lightStatus.normalLight = '35%'
          _self.lightStatus.alwaysLight = '15%'
          _self.modeListClass = false
        }
        // 变成横屏
        if (window.orientation === 90 || window.orientation === -90) {
          _self.lightStatus.normalLight = '32%'
          _self.lightStatus.alwaysLight = '9%'
          _self.modeListClass = true
        }
      }
      this.resize()
      // 获取绑定设备列表
      if (!this.socketList.length) {
        this.loadData = true
        this.loading = false
        return
      }
      this.devicesList = this.socketList
      // 设备列表为空
      if (this.getNameDevicesList.length === 0) {
        this.loadData = true
        this.loading = false
        return
      }
      // 获取所有连接实例，包含红酒柜和雪茄柜，首次进入默认选择该产品的第一个产品，切换产品列表的时候发送当前连接实例
      let fetchCurrentSocket = this.$store.getters['control/currentSocket']
      if (fetchCurrentSocket) {
        this.currentDevice = fetchCurrentSocket
      } else {
        this.currentDevice = this.devicesList.filter((value) => {
          return value.id === this.getNameDevicesList[0].device_id
        })[0]
      }
      this.linkSocket(this.currentDevice)
    },
    linkSocket (currentDevice) {
      let _self = this
      currentDevice.on('data', function (data) {
      // 后台改变的和当前设备不一致的时候不更新数据
        if (_self.currentDevice !== currentDevice) return
        if (data.type === 'datapoint') {
          // 数据端点
          _self.updateData(data.data)
        }
      })
      // 获取后台的数据端点
      currentDevice.emit('probe', function (devices) {
        if (devices.status === 0) {
          _self.loadData = true
          _self.loading = false
          _self.currentDeviceOffline = false
          _self.isVerticalHeight = true
          // 转化allType数据格式进行遍历
          let localData = _self.formatData()
          devices.data.forEach(devices => {
            localData.forEach(item => {
              if (item.key === devices.index) {
                item.value = devices.value
              }
            })
          })
          // 初始化的时候设置当前模式保证只有温控模式才能够调节温度
          _self.currentMode = _self.allType.workMode.value - 0 === 0 || _self.allType.workMode.value - 0 === 1 ? 'temprature' : ''
        } else {
          _self.loadData = true
          _self.loading = false
          // 设备不在线
          _self.currentDeviceOffline = true
          _self.isVerticalHeight = false
        }
      })
    },
    changeData (changeData) {
      let _self = this
      let data = [{
        index: changeData.key,
        value: changeData.value
      }]
      this.currentDevice.emit('senddata', {
        type: 'datapoint',
        data: data
      }, function (res) {
        if (res.status === 0) {
          _self.successTip()
          _self.updateData(data)
        }
      })
    },
    updateData (data) {
      let _self = this
      let localData = _self.formatData()
      data.forEach(data => {
        localData.forEach(item => {
          if (item.key === data.index) {
            item.value = data.value
          }
        })
      })
    },
    //  销毁实例
    destoryOldDeviceLink () {
      this.currentDevice.emit('destory')
    },
    formatData () {
      let localData = []
      for (let type in this.allType) {
        if (type === 'firstMode' || type === 'secondaryMode' || type === 'wineMode') {
          this.allType[type].forEach(item => {
            localData.push(item)
          })
        } else {
          localData.push(this.allType[type])
        }
      }
      return localData
    },
    // 调节温度的按钮背景切换
    statusBg (isAdd) {
      let workMode = this.allType.workMode.value
      if (workMode === 0 || workMode === 1) {
        return isAdd ? 'addTemprature_allowClickBg' : 'subTemprature_allowClickBg'
      } else {
        return isAdd ? 'addTemprature_notAllowClickBg' : 'subTemprature_notAllowClickBg'
      }
    },
    selectDevice (currentDevice) {
      let _self = this
      _self.getNameDevicesList.forEach((item) => {
        if (item.device_name === currentDevice.split('/')[0] || item.device_mac === currentDevice.split('/')[0]) {
          _self.devicesList.forEach((device) => {
            if (device.mac === item.device_mac) {
              _self.currentDevice = device
              this.$store.dispatch('control/currentSocket', device)
              this.linkSocket(this.currentDevice)
            }
          })
        }
      })
      this.$store.dispatch('control/uiDevice', currentDevice)
    },
    showDeviceList () {
      this.deviceListWarp = !this.deviceListWarp
    },
    onClose () {
      this.deviceListWarp = false
    },
    resize () {
      let _self = this
      window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', function () {
        if ([-90, 0, 90, 180].indexOf(window.orientation) !== -1) {
          // 变成竖屏
          if (window.orientation === 180 || window.orientation === 0) {
            _self.lightStatus.normalLight = '35%'
            _self.lightStatus.alwaysLight = '15%'
            _self.modeListClass = false
          }
          // 变成横屏
          if (window.orientation === 90 || window.orientation === -90) {
            _self.lightStatus.normalLight = '31%'
            _self.lightStatus.alwaysLight = '9%'
            _self.modeListClass = true
          }
        }
      })
    },
    // 刷新
    refresh () {
      window.location.reload()
    }
  }
}
</script>
<style lang="less">
@import '~vux/src/styles/1px.less';
.device-controller {
  .device-controller-info {
    width: 100%;
    background: linear-gradient(to right, #b02051, #88054e);
    background: webkit-linear-gradient(270deg, #b02051, #88054e);
    color: #fff !important;
    .current-device {
      height: 1.067rem;
      font-size: 0.373rem;
      line-height: 1.067rem;
      position: relative;
      background: linear-gradient(to right,  #a21f49, #810c48);
      background: webkit-linear-gradient(270deg, #a21f49, #810c48);
      .down__arrow {
        position: absolute;
        width: 0.373rem;
        height: 0.373rem;
        top: 0.423rem;
        right: 0.8rem;
        background: url('../../assets/cigrImage/transpate_arrow_down.png');
        background-size:  0.373rem 0.373rem;
      }
      .deviceList-warp {
        z-index: 9999;
        position: absolute; 
        top: 1.067rem;
        right: 15px;            
        width: 255px;
        border-radius: 5px;        
        overflow: hidden;
        .deviceList {
          font-size: 14px;
          width: 100%;
          padding-left: 6px;
          box-sizing: border-box;
          max-height: 290px;
          background-color: #2f262b;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
          .inner-wrap {
            width: 243px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            .deviceList--per {
              position: relative;
              width: 203px;
              text-overflow: ellipsis;
              white-space: nowrap;
              height: 44px;
              line-height: 44px;
              text-indent: 12px;
              .selectImg {
                position: absolute;
                right: -34px;
                top: 16px;
                width: 14px;
                height: 14px;
                background-image: url("../../assets/image/selectImg.png");
                background-size: 14px 14px; 
              }
            }
          }
        }
      }
      .deviceList-warp__icon-angle {
        &::before {
          position: absolute;
          content: "";
          height: 100%;
          box-sizing: border-box;
          padding-bottom: 32px;
          top: 0;
          width: 0;
          right: 30px;
          margin-left: -8px;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid #2f262b;
          z-index: 99999;
        }
      }
      .current-device--name__icon-angle {
        &::before {
          position: absolute;
          content: "";
          width: 0;
          top: 16px;
          right: 30px;
          margin-left: -8px;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-top: 8px solid #fff;
          z-index: 2;
        }
        &::after {
          position: absolute;
          z-index: 999;
          top: 14px;
          right: 30px;
          margin-left: -8px;
          content: "";
          width: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-top: 8px solid #840e48;
        }
      }
      .current-device--label {
        float: left
      }
      .current-device--name {
        text-align:center;
        width:100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
      }
      .weui-cell__bd {
        line-height: 5.9vh;
        &::after {
          border-width: 0 2px 2px 0;
          right: 9%;
          margin-top: -6px;
        }
        .weui-select {
          color: #fff !important;
          height: 6.63vh;
          line-height: 6.63vh;
        }
      }
    }
    .temprature--info {
      position: relative;
      // height: 100%;
      // padding-bottom: 35vh;
      padding-bottom: 6rem;
      font-size: 14px;
      box-sizing: border-box;
      .subTemprature{
        display: inline-block;
        // width: 8.6vh;
        // height: 8.2vh;
        width: 8.6vmax;
        height: 8.2vmax;
        position: absolute;
        // top: 12.75vh;
        top: 12.75vmax;
        background: url('../../assets/image/subTemprature_allowClick.png');
        background-size:  8.6vmax 8.2vmax;
        &:active {
          background: url('../../assets/image/subTemprature_click.png');
          background-size:  8.6vmax 8.2vmax;        
        }
      }
      .subTemprature_notAllowClickBg {
        background: url('../../assets/image/subTemprature_notAllowClick.png');
        background-size:  8.6vmax 8.2vmax;   
      }
      .subTemprature_allowClickBg {
        background: url('../../assets/image/subTemprature_allowClick.png');
        background-size:  8.6vmax 8.2vmax;
      }
      .addTemprature {
        display: inline-block;
        width: 8.6vmax;
        height: 8.2vmax;
        position: absolute;
        top: 12.75vmax;
        right: 0;
        background: url('../../assets/image/addTemprature_allowClick.png');
        background-size:  8.6vmax 8.2vmax;
        &:active {
          background: url('../../assets/image/addTemprature_click.png');
          background-size:  8.6vmax 8.2vmax;
        }
      }
      .addTemprature_notAllowClickBg {
        background: url('../../assets/image/addTemprature_notAllowClick.png');
        background-size:  8.6vmax 8.2vmax;   
      }
      .addTemprature_allowClickBg {
        background: url('../../assets/image/addTemprature_allowClick.png');
        background-size:  8.6vmax 8.2vmax;
      }
      .currentTemprature {
        position: absolute;
        top: 2vh;
        left: 4vw;
        text-align: center;
        .tempratureSize {
          font-size: 14px;
        }
        .valueSize {
          font-size: 14px;
        }
      }
      .tempratureDashboard {
        position: absolute;
        left: 50%;
        // padding-top: 3%;
        box-sizing: border-box;
        margin-left: -2.5rem;
        bottom: 0.9rem;
        width: 5rem;
        height: 3.4rem;
        .tempratureDashboard__cirle {
          transform: rotateZ(-120deg);
          text-align: center;
          position: absolute;
          width: 100%;
          height: 100%;
          left: -14%;
        }
        .tempratureDashboard__setTemprature {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          .temprature {
            display: inline-block;
            font-size: 0.4rem;
            margin-top: -0.4rem;
            line-height: 1;
            width: 100%;
            text-align: center;
            .setTempratureSize {
              font-size: 2rem;
              // font-size: 1.2rem;
              margin-right: 1.3vh;
            }
          }
          .currentMode {
            text-align: center;
            // font-size: 12px;
            font-size: 0.4rem;
            line-height: 2.2;
          }
          .remainingTime {
            text-align: center;
            font-size: 12px;
          }
          .minTemprature {
            position: absolute;
            left: -12px;
            bottom: 6px;
          }
          .maxTemprature {
            position: absolute;
            right: -12px;
            bottom: 6px;
          }
        }
        // .a {
        //   .temprature {
        //     font-size: 2.9vmax;
        //   }
        // }
      }
      .limtTemprature {
        position: absolute;
        line-height: 24px;
        // font-size: 2vh;
        font-size: 0.4rem;
        padding-bottom: 0.7rem;
        bottom: 0.4rem;
        width: 100%;
        height: 30px;
        background: linear-gradient(to right, #b02051, #88054e);
        .minTemprature {
          display: inline-block;
          position: absolute;
          left: 20%;
        }
        .maxTemprature {
          position: absolute;
          right: 18%;
        }
      }
    }
  }
  .device-mode--first {
    width: 100%;
    position: relative;
    font-size: 2.1vh;
    margin-top: -38px;
    .img {
      width: 7.1vmax;
      height: 7.1vmax;
      display: inline-block;
    }
    .temprature {
      background: url('../../assets/image/temprature.png');
      background-size: 7.1vmax 7.1vmax;
    }
    .cellar {
      background: url('../../assets/image/cellar.png');
      background-size: 7.1vmax 7.1vmax;
    }
    .wine {
      background: url('../../assets/image/wine2.png');
      background-size: 7.1vmax 7.1vmax;
    }
    .active {
      color: #cc3d79 !important;
      border-color: #cc3d79 !important;
      .temprature {
        background: url('../../assets/image/temprature-active.png');
        background-size: 7.1vmax 7.1vmax;
      }
      .cellar {
        background: url('../../assets/image/cellar-active.png');
        background-size: 7.1vmax 7.1vmax;
      }
      .wine {
        background: url('../../assets/image/wine2-active.png');
        background-size: 7.1vmax 7.1vmax;
      }
    }
    .vux-tab {
      padding-bottom: 0.2rem;
      padding-top: 0.3rem;
      height: inherit;
      .vux-tab-item {
        font-size: 2.54vmax;
        background: none;
        line-height: inherit;
      }
      .vux-tab-bar-inner {
        width: 14vmax !important;
      }
    }
    .vux-1px-radius {
      &:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 1px;
        border: 1px solid #C7C7C7;
        color: #C7C7C7;
        height: 200%;
        border-radius: 8px;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }
    }
    .wineMode--box {
      position: absolute;
      top: 108%;
      // right: 5vw;
      // right: 0.2rem;
      left: 72%;
      z-index: 2;
      // width: 24vw;
      // height: 23vh;
      padding-right: 0.4rem;
      padding-left: 0.4rem;
      box-sizing: border-box;
      border-radius: 8px;
      background-color: #fff;
      text-align: center;
      box-shadow: 0px -1px 10px 4px rgba(0, 0, 0, 0.1);
      .icon-angle {
        &::after {
        position: absolute;
        top: -8px;
        left: 12vw;
        margin-left: -8px;
        content: "";
        width: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;  
        border-bottom: 8px solid #c4c4c4;
        }
        &::before {
          position: absolute;
          content: "";
          width: 0;
          top: -7px;
          left: 12vw;
          margin-left: -8px;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid #fff;
          z-index: 2;
        }
      }
      .wineMode {
        position: relative;
        height: 33.33%;
        // font-size: 3.5vw;
        font-size: 2.54vmax;
        box-sizing: border-box;
        // padding-top: 14px;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        &:hover {
          color: #cc3d79 !important;
        }
        &:last-child {
          border-bottom: none !important;
          background-color: red;
        }
      }
    }
  }
  .sliveBg {
    // flex: 1;
    height: 1.6vh;
    background-color: #efefef;
  }
  .device-mode--secondary {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    div {
      .weui-cells {    
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: 2.54vmax; 
        margin-top: 0px;
      }
      .vux-flexbox {
        // padding: 0.36rem 0.4rem 0.2rem 0.4rem;
        padding: 11px 2.1vmax;
        height: 52.8px;
        .normalSwitch {
          margin-left: 2.1vh !important;
          padding-right: 2.5vh;
          z-index:1  !important;
        }
        .normalSwitch-hoz {
          .vux-x-switch.weui-cell_switch {
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 20px;
            padding-right: 26px;
          }
        }
        .barLightMode {
          padding-right: 2.5vh;
          margin-left: -45vw  !important;
          color: transparent  !important;
        }
        .barLightMode-hoz {
          .vux-x-switch.weui-cell_switch {
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 20px;
            padding-right: 26px;
          }
        }
        .normal {
          position: absolute;
          // bottom: 3px;
          // right: 28vw;
          top: 75%;
          right: 35%;
          font-size: 1.65vmax;
        }
        .light {
          position: absolute;
          top: 75%;
          right: 15%;
          font-size: 1.65vmax;
        }
        .secondary__img--size {
          display: inline-block;
          width: 7.1vmax;
          height: 7.1vmax;
        }
        .moisture {
          background: url('../../assets/image/moisture.png');
          background-size: 7.1vmax 7.1vmax;
        }
        .sober {
          background: url('../../assets/image/soberup.png');
          background-size: 7.1vmax 7.1vmax;
        }
        .odor {
          background: url('../../assets/image/degermation.png');
          background-size: 7.1vmax 7.1vmax;
        }
        .bar {
          background: url('../../assets/image/bar.png');
          background-size: 7.1vmax 7.1vmax;
        }
        .vux-label-desc {
          font-size: 2.1vmax;
          color: #cd3f78;
        }
      }
      .pd8 {
        padding: 8px 2.1vh;
      }
    }
  }
}
.weui-switch:checked {
  border-color: #cd3f78 !important;
  background-color: #cd3f78 !important;
}
.nullData {
  text-align: center;
  .img {
    width: 100vw;
    height: 54vh;
    background: url('../../assets/image/nullDevice.png') center no-repeat;
  }
  .addDevice {
    width: 44vw;
    height: 5.8vh;
    margin: 0 auto;
    .custom-primary-red {
      border-radius: 5px;
      border-color: #cd3f78;
      color: #cd3f78;
      border-width: 1px;
      // height: 5.8vh;
      // line-height: 5.8vh;
      background-color: #fff;
      &:active {
        border-color: rgba(205, 63, 120, 0.9);
        color: rgba(205, 63, 120, 0.9);
      }
    }
  }
}
.currentDeviceOffline {
  text-align: center;
  .img {
    margin-top: -18vh;
    width: 100vw;
    height: 62vmin;
    background: url('../../assets/image/nullDevice.png') center 82% no-repeat;
    background-size: 50vmin 50vmin;
  }
  .outline-font {
    font-size: 16px;
  }
  .addDevice {
    padding-top: 4vh;
    width: 58vmin;
    height: 5.8vh;
    margin: 0 auto;
    .weui-btn {
      line-height: 2;
    }
    .custom-primary-red {
      border-radius: 5px;
      border-color: #cd3f78;
      color: #cd3f78;
      border-width: 1px;
      // height: 5.8vh;
      // line-height: 5.8vh;
      background-color: #fff;
      &:active {
        border-color: rgba(205, 63, 120, 0.9);
        color: rgba(205, 63, 120, 0.9);
      }
    }
  }
}
.mb10 {
  margin-bottom: 10vh;
  font-size: 16px;
}
.pd {
  padding: 8px 2.1vh !important;
}
</style>

<style lang="less">
@import '~vux/src/styles/1px.less';
.device-page-index {
  height: 100%;
  .device-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    .device-controller { 
      .device-mode--secondary {
        .vux-list-hoz {
          flex: 1;
          display: flex;
          flex-direction: column;
        }
      }
    }
    .device-controller-hoz { 
      // height: 100%;
      display: flex;
      flex-direction: column;
    }
    .verticalHeight {
      height: 100%;
    }
    .nullData-hoz {
      flex-grow: 1;
    }
    .currentDeviceOffline-hoz {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
